<template>
  <div class="card-wrap flex-column justify-end card-padding">
    <el-form :model="form" :rules="type !== 'detail'?rules:{}" ref="informationJf" label-width="140px" :label-position="type =='detail'?'right':'top'">
      <div class="card-title-wrap">
        <span>交付信息</span>
        <span></span>
      </div>
      <!-- 交付信息编辑模块 -->
      <div :style="{marginLeft: (type == 'detail'?'':'50px')}">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;width: 100%;margin-top: 20px;">
          <el-form-item label="收车信息:" prop="receivingInfo" style="min-Width: 33%">
            <el-radio-group v-if="type !=='detail'" v-model="form.receivingInfo">
              <el-radio :label="1">供应商收车</el-radio>
              <el-radio :label="2">自行收车</el-radio>
            </el-radio-group>
            <span v-if="type =='detail'">{{ form.receivingInfo==1?'供应商收车':'自行收车' }}</span>
          </el-form-item>
          <el-form-item v-if="form.receivingInfo == 1" label="供应商:" style="min-Width:33%;">
            <span>{{ $route.query.supplierName }}</span>
          </el-form-item>
          <el-form-item v-if="form.receivingInfo == 2" label="收车人:" style="min-Width:33%;">
            <el-input v-if="type !=='detail'" style="width: 80%" v-model="form.supplierName"></el-input>
            <span v-if="type =='detail'">{{ form.supplierName }}</span>
          </el-form-item>
          <el-form-item label="交付人:" prop="deliveryPeople" style="min-Width: 33%">
            <el-input v-if="type !=='detail'" style="width: 80%" v-model="form.deliveryPeople" placeholder="请输入交付人"></el-input>
            <span v-if="type =='detail'">{{ form.deliveryPeople }}</span>
          </el-form-item>
          <el-form-item label="交付时间:" prop="deliveryTime" style="min-Width:33%;">
            <el-date-picker v-if="type !=='detail'" type="date" placeholder="选择交付时间" value-format='yyyy-MM-dd' style="width: 80%;" v-model="form.deliveryTime">
            </el-date-picker>
            <span v-if="type =='detail'">{{ form.deliveryTime }}</span>
          </el-form-item>
        </div>
        <el-form-item label="说明:">
          <el-input style="width: 60%;" maxlength="500" type="textarea" v-if="type!=='detail'" :rows="8" placeholder="请输入内容" v-model="form.content">
          </el-input>
          <span v-if="type=='detail'">{{ form.content }}</span>
        </el-form-item>
        <el-form-item label="附件:" prop="attachments">
          <ImageCommon v-if="type !=='detail'" :up-type="2" info="选择附件" :limit="5" v-model="form.attachments" isShowTip :fileSize="30" :fileType="['png/jpg/jpeg/pdf/doc/docx/excel']"></ImageCommon>
          <ImageCommon v-if="type =='detail'" :up-type="2" v-model="form.attachments" info="选择附件" disabled></ImageCommon>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  // 交付信息
  name: 'informationJf',
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      total: 0,
      rules: {
        receivingInfo: [
          {
            required: true,
            message: '请选择收车信息',
            trigger: 'change',
          },
        ],
        deliveryPeople: [
          {
            required: true,
            message: '请输入交付人',
            trigger: 'change',
          },
        ],
        deliveryTime: [
          {
            required: true,
            message: '请选择交付时间',
            trigger: 'change',
          },
        ],
      },
    };
  },
  created() { },
  methods: {
    // 校验
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
